<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
              <el-button type="primary" size="small" @click="exportExcel">导出Excel表格</el-button>
            </div>
            <el-table :data="data" id="out-table"  border style="width: 100%">
                <el-table-column prop="id" label="订单ID" widht="100"></el-table-column>
                <el-table-column prop="goodsName" label="商品名称" width="180" ></el-table-column>
                <el-table-column prop="studentId" label="UID" width="180" ></el-table-column>
                <el-table-column prop="createTime" label="交易时间" width="180"></el-table-column>
                <el-table-column prop="studentName" label="购课学员" width="180"></el-table-column>
                <el-table-column prop="organizationName" label="所属机构" width="180"></el-table-column>
                <el-table-column prop="status" label="交易状态"  :formatter="stateFormat"></el-table-column>
                <el-table-column prop="payTypeName" label="支付方式"></el-table-column>
                <el-table-column prop="saleRatio" label="折扣"  width="110">
                  <template slot-scope="scope">
                    {{scope.row.saleRatio==1?"- -":scope.row.saleRatio}}
                  </template>
                </el-table-column>
                <el-table-column prop="organizationUserName" label="课程顾问"></el-table-column> 
                <el-table-column prop="orderAmount" label="实 金额" width="130"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="pageData">
                </el-pagination>
            </div>  
        </div>
    </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "basetable",
  data() {
    return {
      tableData: [],
      fengye:1,
      pageData: undefined,
    };  
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    //交易状态码判断
    stateFormat(row, status) {   
        if (row.status === 0) {
            return '未支付'
        } else if (row.status === 1) {
            return '已支付'
        } else if(row.status ===2){
          return '已关闭'
        }
    },
    // 折扣信息
    saleRatios(row) { 
      console.log(row.saleRatio);
        // if (row.saleRatio == Number(1)) {
        //     return '- - '
        // }
    },
    typeFormat(row,payType){
        if(row.payType === 1){
            return "线下"
        } else if(row.payType === 2){
            return "微信"
        }
    },
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取后台数据
    getData() { 
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/goods/xzs/order.list.get";
      this.$axios({
        url:this.url,
        method:"post",
        data:{
          organizationId:organizationId,
          orderStatus:1,
          pageNum:that.fengye,
          pageSize:"10",
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }
        ],
      }).then(res =>{
        this.tableData=res.data.data.pageList
        console.log(this.tableData);
        
        this.pageData=res.data.data.total
      }).catch(err =>{
        console.log(err);
      })
    },
    //时间戳转换
    timestampToTime(timestamp) {
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = String(date.getMinutes()).padStart(2, "0");
      return Y + M + D + h + m;
    },
    // 导出Excel表格
    exportExcel() {
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "Order.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  height: 50px;
  margin-top: -20px;
  border-radius: 5px;
  background: #f4fafa;
}
.handle-input {
  width: 235px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.el-table thead {
  text-align: center;
  color: black;
}
</style>
